<template>
    <div class="userHome-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>收货地址</BreadcrumbItem>
        </Breadcrumb>
        <Divider orientation="left">收货地址列表</Divider>
        <!-- 新增收货地址 -->
        <div class="add-receiveAddr">
            <Button type="primary" @click="modal3 = true"><Icon type="md-add" /> 新增</Button>
        </div>
        <!-- 收货地址列表 -->
        <div class="receiveAddr-list">
            <div class="receiveAddr-item" v-for="(item,i) in addrList" :key="i">
                <div class="item-left">
                    <p>收货人：{{item.raFullname}}<span class="my-phone">{{item.raPhone}}</span>
                        <span class="defalut" v-if="item.raDefaultAddr==1">默认</span>
                    </p>
                    <p>收货地址：{{item.raAddr}}</p>
                </div>
                <div class="item-right">
                    <a href="#" class="edit" @click="findByIdBefore(item.raId)">编辑</a>
                    <a href="#" class="more" @click="findById(item.raId)" >详情</a>
                    <a href="#" class="delete" @click="deleteById(item.raId)" >删除</a>
                </div>
            </div>
        </div>
        <!-- 编辑模态框区域 -->
        <Modal
            v-model="modal1"
            title="编辑收货地址"
            @on-ok="add2"
            @on-cancel="add2">
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="80">
                <FormItem label="收货人" prop="raFullname">
                    <Input v-model="formValidate2.raFullname" placeholder="请输入收货人姓名"/>
                </FormItem>
                <FormItem label="电话" prop="raPhone">
                    <Input v-model="formValidate2.raPhone" placeholder="请输入收货人电话"/>
                </FormItem>
                <FormItem label="省市区">
                    <el-cascader
                    :placeholder="placeholder"
                    :options="options"
                    v-model="selectedOptions2"
                    ref="cascaderAddr2"
                    @change="handleChange2">
                    </el-cascader>
                </FormItem>
                <FormItem label="详细地址" prop="raAddr">
                    <Input v-model="formValidate2.raAddr" placeholder="请输入详细地址"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="update('formValidate2')">保存</Button>
                </FormItem>
                <FormItem>
                    <Checkbox v-model="raDefaultAddrTwo" @on-change="isDefault">设置为默认收货地址</Checkbox>
                </FormItem>
            </Form>
        </Modal>
        <!-- 详情模态框区域 -->
        <Modal
            v-model="modal2"
            title="收货地址详情">
            <p>收货人：{{receiveAddr.raFullname}}</p>
            <p>电话：{{receiveAddr.raPhone}}</p>
            <p>详细地址：{{receiveAddr.raAddr}}</p>
            <p>是否默认收货地址：{{receiveAddr.raDefaultAddr}}</p>
        </Modal>
        <!-- 新增模态框区域 -->
        <Modal
            v-model="modal3"
            title="新增收货地址"
            @on-ok="add">
             <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="收货人" prop="raFullname">
                    <Input v-model="formValidate.raFullname" placeholder="请输入收货人姓名"/>
                </FormItem>
                <FormItem label="电话" prop="raPhone">
                    <Input v-model="formValidate.raPhone" placeholder="请输入收货人电话"/>
                </FormItem>
                <FormItem label="省市区">
                    <el-cascader
                    :options="options"
                    v-model="selectedOptions"
                    ref="cascaderAddr"
                    @change="handleChange">
                    </el-cascader>
                </FormItem>
                <FormItem label="详细地址" prop="raAddr">
                    <Input v-model="formValidate.raAddr" placeholder="请输入详细地址"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="save('formValidate')">保存</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
let pcas = require('../../../assets/pca-code.json')

export default {
  name: 'receiveAddress',
  data () {
    return {
      raId: 0, // 保存收货地址id
      options: pcas, // 省市区
      placeholder: '',
      selectedOptions: [],
      selectedOptions2: [],
      modal1: false, // 3个模态框
      modal2: false,
      modal3: false,
      raDefaultAddr: false, // 是否默认地址
      raDefaultAddr2: 0,
      raDefaultAddrTwo: false,
      raDefaultAddrTwo2: 0,
      raProvince: '', // 省市区
      raCity: '',
      raRegion: '',
      raProvince2: '',
      raCity2: '',
      raRegion2: '',
      formValidate: {
        raFullname: '',
        raPhone: '',
        raAddr: ''
      },
      ruleValidate: {
        raFullname: [
          { required: true, message: '收货人不能为空', trigger: 'blur' }
        ],
        raPhone: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        raAddr: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ]
      },
      formValidate2: {
        raFullname: '',
        raPhone: '',
        raAddr: ''
      },
      ruleValidate2: {
        raFullname: [
          { required: true, message: '收货人不能为空', trigger: 'blur' }
        ],
        raPhone: [
          { required: true, message: '电话不能为空', trigger: 'blur' }
        ],
        raAddr: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ]
      },
      addrList: [], // 收货地址列表
      receiveAddr: '', // 收货地址详情
      receiveAddr2: '' // 修改页面收货地址详情
    }
  },
  created () {
    this.findList()
  },
  methods: {
    // 新增时获取省市区地址级联
    handleChange (e, form, thsAreaCode) {
      // eslint-disable-next-line dot-notation
      thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // console.log(thsAreaCode) // 注意3： 最终结果是个一维数组对象
      this.raProvince = thsAreaCode[0]
      this.raCity = thsAreaCode[1]
      this.raRegion = thsAreaCode[2]
    },
    // 修改时获取省市区地址级联
    handleChange2 (e, form, thsAreaCode) {
      // eslint-disable-next-line dot-notation
      thsAreaCode = this.$refs['cascaderAddr2'].getCheckedNodes()[0].pathLabels
      this.raProvince2 = thsAreaCode[0]
      this.raCity2 = thsAreaCode[1]
      this.raRegion2 = thsAreaCode[2]
    },
    // 重置新增表单内容
    handleReset (name) {
      this.$refs[name].resetFields()
      this.selectedOptions = []
    },
    // 新增收货地址
    save (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'receiveAddress/save',
            method: 'post',
            params: {
              raUid: JSON.parse(localStorage.getItem('user')).uId,
              raProvince: this.raProvince,
              raCity: this.raCity,
              raRegion: this.raRegion,
              raFullname: this.formValidate.raFullname,
              raPhone: this.formValidate.raPhone,
              raAddr: this.formValidate.raAddr
            },
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 新增收货确定后刷新列表重新获取地址列表
    add () {
      this.findList()
      this.formValidate = {}
      this.selectedOptions = []
    },
    // 编辑收货地址后刷新列表重新获取地址列表
    add2 () {
      this.findList()
    },
    // 查询收货地址列表
    findList () {
      this.$axios({
        url: 'receiveAddress/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.addrList = res.data.list
        }
      })
    },
    // 根据Id删除此收货地址
    deleteById (id) {
      this.$axios({
        url: 'receiveAddress/deleteById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
          this.findList()
        }
      })
    },
    // 根据id查询此收货地址详情
    findById (id) {
      this.receiveAddr = ''
      this.modal2 = true
      this.$axios({
        url: 'receiveAddress/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.receiveAddr = res.data.object
          // 修改是否默认地址表示方式
          if (res.data.object.raDefaultAddr === 0) {
            this.receiveAddr.raDefaultAddr = '否'
          } else {
            this.receiveAddr.raDefaultAddr = '是'
          }
        }
      })
    },
    // 编辑前先根据id查找此收货地址
    findByIdBefore (id) {
      this.modal1 = true
      this.$axios({
        url: 'receiveAddress/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.formValidate2.raFullname = res.data.object.raFullname
          this.formValidate2.raPhone = res.data.object.raPhone
          this.formValidate2.raAddr = res.data.object.raAddr
          // 修改是否默认地址表示方式
          if (res.data.object.raDefaultAddr === 0) {
            this.raDefaultAddrTwo = false
          } else {
            this.raDefaultAddrTwo = true
          }
          // this.selectedOptions2 = ['11', '1101', '110101']
          this.placeholder = res.data.object.raProvince + '/' + res.data.object.raCity + '/' + res.data.object.raRegion
          this.raProvince2 = res.data.object.raProvince
          this.raCity2 = res.data.object.raCity
          this.raRegion2 = res.data.object.raRegion
        }
      })
      this.raId = id
    },
    // 设置默认收货地址
    isDefault (value) {
      if (value) {
        this.raDefaultAddr2 = 1
      } else {
        this.raDefaultAddr2 = 0
      }
      this.$axios({
        url: 'receiveAddress/updateDefault',
        method: 'get',
        params: {
          raUid: JSON.parse(localStorage.getItem('user')).uId,
          raDefaultAddr: this.raDefaultAddr2,
          raId: this.raId
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
        }
      })
    },
    // 修改收货地址
    update (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$axios({
            url: 'receiveAddress/update',
            method: 'get',
            params: {
              raId: this.raId,
              raProvince: this.raProvince2,
              raCity: this.raCity2,
              raRegion: this.raRegion2,
              raFullname: this.formValidate2.raFullname,
              raPhone: this.formValidate2.raPhone,
              raAddr: this.formValidate2.raAddr
            },
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$Message.success(res.data.msg)
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style scoped>
.userHome-container {
    min-height:480px;
}
.add-receiveAddr {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: flex-end;
    margin-bottom: 16px;
}
.receiveAddr-list{
    width: 100%;
    height: auto;
}
.receiveAddr-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #e8eaec;
}
.my-phone {
    margin-left: 30px;
}
.item-right a{
    font-size: 12px;
}
.item-right .edit {
    border-right: 1px solid #e8eaec;
    padding-right: 5px;
}
.item-right .more {
    margin-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #e8eaec;
}
.item-right .delete {
    margin-left: 5px;
}
.defalut {
    margin-left: 8px;
    font-size: 10px;
    color:#ef4238;
}
</style>
